<template>
  <div>
    <a-tabs v-model:activeKey="activeKey" type="card" @change="tabChange">
      <a-tab-pane key="tab1" tab="SMTP设置">
        <a-form
          ref="smtpFormRef"
          :model="smtpFormState"
          :rules="smtpFormRule"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="SMTP服务器" has-feedback required name="host">
            <a-input v-model:value="smtpFormState.host" placeholder="请填写SMTP服务器地址" />
          </a-form-item>
          <a-form-item label="SMTP用户名" has-feedback required name="username">
            <a-input v-model:value="smtpFormState.username" placeholder="请填写SMTP用户名" />
          </a-form-item>
          <a-form-item label="SMTP密码" has-feedback required name="password">
            <a-input-password
              v-model:value="smtpFormState.password"
              placeholder="请填写SMTP密码或者授权码"
            />
          </a-form-item>
          <a-form-item label="服务器端口" has-feedback required name="port">
            <a-input v-model:value="smtpFormState.port" placeholder="请填写SMTP服务器端口" />
          </a-form-item>
          <a-form-item label="发件人" has-feedback required name="from">
            <a-input v-model:value="smtpFormState.from" placeholder="请填写发件人邮箱地址" />
          </a-form-item>
          <a-form-item label="发件人姓名" name="from_name">
            <a-input
              v-model:value="smtpFormState.from_name"
              placeholder="请填写发件人姓名，如：云商数据 (选填)"
            />
          </a-form-item>
          <a-form-item label="回复邮箱" name="reply">
            <a-input v-model:value="smtpFormState.reply" placeholder="请填写回复邮箱 (选填)" />
          </a-form-item>
          <a-form-item style="margin-left: 12.5%">
            <a-button
              type="primary"
              html-type="submit"
              :loading="smtpLoading"
              @click="smtpOnSubmit"
            >
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="tab2" tab="邮件测试">
        <a-form
          ref="testFormRef"
          :model="testFormState"
          :rules="testFormRule"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-form-item label="邮箱地址" has-feedback required name="test_email">
            <a-input v-model:value="testFormState.test_email" placeholder="请填写收件人邮箱地址" />
          </a-form-item>
          <a-form-item style="margin-left: 12.5%">
            <a-button
              type="primary"
              html-type="submit"
              :loading="testLoading"
              @click="testOnSubmit"
            >
              发送测试邮件
            </a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col } from 'ant-design-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getEmailSetting, editEmailSetting, testEmailSetting } from '@/api/system'
import { validateEMail } from '@/utils/validate'

export default defineComponent({
  name: 'EmailSetting',
  components: {
    [Row.name]: Row,
    [Col.name]: Col
  },
  setup() {
    const smtpFormRef = ref()
    const testFormRef = ref()
    const state = reactive({
      smtpLoading: false,
      testLoading: false,
      activeKey: ref('tab1'),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    })
    const smtpFormState = reactive({
      host: '',
      username: '',
      password: '',
      port: '',
      from: '',
      from_name: '',
      reply: ''
    })
    const smtpFormRule = {
      host: [{ required: true, message: '请填写SMTP服务器地址', trigger: ['blur', 'change'] }],
      username: [{ required: true, message: '请填写SMTP用户名', trigger: ['blur', 'change'] }],
      password: [
        { required: false, message: '请填写SMTP密码或者授权码', trigger: ['blur', 'change'] }
      ],
      from: [
        { required: false, message: '请填写发件人邮箱地址', trigger: ['blur', 'change'] },
        { validator: validateEMail }
      ],
      port: [
        { required: true, message: '请填写SMTP服务器端口', trigger: ['change'], type: 'number' }
      ]
    }
    const testFormState = reactive({
      test_email: ''
    })
    const testFormRule = {
      test_email: [
        { required: true, message: '请填写收件人邮箱地址', trigger: ['blur', 'change'] },
        { validator: validateEMail }
      ]
    }
    onMounted(() => {
      getDataList()
    })

    const tabChange = () => {
      getDataList()
    }

    function getDataList() {
      getEmailSetting({ tab: state.activeKey }).then((res) => {
        if (state.activeKey == 'tab1') {
          for (let item in res) {
            smtpFormState[item] = res[item]
          }
        }
      })
    }
    const smtpOnSubmit = () => {
      smtpFormRef.value
        .validate()
        .then(() => {
          editEmailSetting(toRaw(smtpFormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.smtpLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    const testOnSubmit = () => {
      testFormRef.value
        .validate()
        .then(() => {
          testEmailSetting(toRaw(testFormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.testLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      smtpFormRef,
      smtpFormState,
      smtpFormRule,
      testFormRef,
      testFormState,
      testFormRule,
      tabChange,
      smtpOnSubmit,
      testOnSubmit,
      getDataList
    }
  }
})
</script>

<style lang="scss" scoped>
::v-deep(.ant-checkbox) {
  display: none;
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked {
  border: 2px solid #1890ff;
  border-radius: 3px;
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px solid #1890ff;
  border-top-color: transparent;
  border-left-color: transparent;
}
.ant-checkbox-wrapper.ant-checkbox-wrapper-checked:after {
  content: '';
  width: 5px;
  height: 11px;
  position: absolute;
  right: 3px;
  bottom: 2px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
.ant-checkbox-wrapper {
  border: 2px solid #ebebeb;
  border-radius: 3px;
}
</style>
